<template>
    <view class="page custom-page">
      <custom-head gradient back title="详情"></custom-head>
      <view class="content">

            <view class="content_top">发放状态: 已完成</view>

            <view class="content_center">
                <image class="img" src="../../static/logo.png" />
                <view class="center_text">
                    <view class="title_text">塔克飞机积木</view>
                    <view class="count_text">数量：1件</view>
                </view>

                <view class="right_text">
                    <text class="count_text">1288</text>
                    <text class="unit_text">(积分)</text>
                </view>
            </view>

            <view class="content_buttom">
                <view class="title">发放信息</view>
                <view class="subtitle">
                    <view class="text_1">发放老师：</view>
                    <view class="text_2">美术一班李老师</view>
                </view>

                <view class="subtitle">
                    <view class="text_1">发放学生：</view>
                    <view class="text_2">美术一班李老师</view>
                </view>

                <view class="subtitle">
                    <view class="text_1">申请时间：</view>
                    <view class="text_2">美术一班李老师</view>
                </view>

                <view class="subtitle">
                    <view class="text_1">发放时间：</view>
                    <view class="text_2">美术一班李老师</view>
                </view>
            </view>
      
     </view>
    </view>
  </template>
  
  <script>
  
    export default {
      data () {
        return {}
      },
      
      mounted() {
      },
  
      methods: {
      }
    }
  </script>
  <style scoped lang="scss">
  .content {
    .content_top {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 106rpx;
        background-color: #f3f4f5;
    }

    .content_center{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 750rpx;
        height: 210rpx;
        background: #FFFFFF;
        padding: 30rpx 30rpx 30rpx 42rpx;
        box-shadow: 0rpx 2rpx 8rpx 0rpx #DDDFEB;

        .img {
            width: 150rpx;
            height: 150rpx;
            border-radius: 20rpx;
        }
        .center_text{
            margin-right: 136rpx;
            .title_text {
                margin-bottom: 23rpx;
                font-size: 32rpx;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                color: #303133;
            }
            .count_text {
                font-size: 26rpx;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                color: #606265;
            }
        }
        .right_text {
            display: flex;
            align-items: center;
            .count_text {
                font-size: 36rpx;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                color: #2979FF;
                margin-right: 20rpx;
            }
            .unit_text{
                font-size: 24rpx;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                color: #2979FF;
            }
        }
    }

    .content_buttom {
        width: 749rpx;
        height: 366rpx;
        background: #FFFFFF;
        margin-top: 24rpx;
        padding: 35rpx 52rpx 80rpx 42rpx;
        .title {
            font-size: 28rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            color: #303133;
        }
        .subtitle{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .text_1 {
                font-size: 24rpx;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                color: #787878;
            }
            .text_2 {
                font-size: 28rpx;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                color: #303133;
            }
        }
    }
  }
  </style>